<template>
 <div class="bg-white box-sizing radius-base p-20">
   <div class="flex align-center justify-between f18 px-20">
    <p>个人资料</p>
    <div>
      <Button type="text" class="f16 mr-10" v-show="!editable" @click="cancel">取消修改</Button>
      <Button type="text" class="f18 fc-blue" @click="alterStatus">{{ content }}</Button>
    </div>
  </div>
  <div class="bg-white box-sizing p-20">
    <Form ref="beingUserInfo" :model="beingUserInfo">
      <FormItem label="用户昵称：">
        <Input v-model="beingUserInfo.username" :disabled="editable"></Input>
      </FormItem>
      <FormItem label="个性签名：">
        <Input v-model="beingUserInfo.personalizedSignature" :disabled="editable"></Input>
      </FormItem>
      <FormItem label="权限级别：">
        <Select v-model="beingUserInfo.role" class="w-100" :disabled="true">
          <Option
            v-for="item in userLevel"
            :value="item.id"
            :label="item.label"
            :key="item.id"
            >
          </Option>
        </Select>
      </FormItem>
    </Form>
  </div> 
 </div>
</template>
<script>
import mixins from '@/mixins/index.js'
export default {
  name: '',
  mixins: [mixins],
  data () {
    return {
      beingUserInfo: {},
      editable: true, // 不编辑状态
      content: '更改信息', // 按钮信息
    };
  },
  created(){
   this.beingUserInfo = this.userInfo
  },
  mounted(){
  },
  methods: {
    // 编辑
    alterStatus() {
      if (this.editable) {
        this.content = '保存信息'
        this.editable = false
      } else {
        // 请求之后
        this.alterUserInfo()
        this.content = '更改信息'
        this.editable = true
      }
    },
    // 取消
    cancel() {
      this.editable = true
      this.content = '更改信息'
    }
  },
}
</script>
<style lang='' scoped>
</style>